<script>
    let txt = ['一次录入','二次录入','审核']
    let s = require('../../../assets/right_s.png') 
    let u = require('../../../assets/right_u.png') 

    export default {
        props:['step'],
        render(el){
            let a = el('div',{
                class:'item'
            },)
            return el('div',{
                class:'stepBox'
            },this.step.map(function(a,b,c){
                if(a != '审核人' && a != '复录人'){
                    return el('div',{
                        class:'item'
                    },[
                        el('div',{
                            class:'num'
                        },b+1),
                        el('div',{
                            class:'itemContent'
                        },[
                            el('div',txt[b]),
                            el('div',{
                                class:'user'
                            },a)
                        ]),
                        el('img',{
                            attrs:{
                                src:s
                            }
                        })
                    ]);
                }else{
                    return el('div',{
                        class:'itemUn'
                    },[
                        el('div',{
                            class:'num'
                        },b+1),
                        el('div',{
                            class:'itemContent'
                        },[
                            el('div',txt[b]),
                            el('div',{
                                class:'user'
                            },a)
                        ]),
                        el('img',{
                            attrs:{
                                src:u
                            }
                        })
                    ]);
                    // return this.renderItem(el,'itemUn',a,b,u)
                }
            }))
        },
        created(){
        },
        data(){
            return {

            }
        },
        methods:{
            renderItem(el,cla,user,index,img){
                return el('div',{
                        class:cla
                    },[
                        el('div',{
                            class:'num'
                        },index+1),
                        el('div',{
                            class:'itemContent'
                        },[
                            el('div',txt[index]),
                            el('div',{
                                class:'user'
                            },user)
                        ]),
                        el('img',{
                            attrs:{
                                src:img
                            }
                        })
                    ])
            }
        }
    }
</script>
<style lang="less" scoped>
    @import '~_config/mixin.less';
    @bgCol:#3395FF;
    @unItem:#E5E2E5;
    
    .stepBox{
        width:90%;
        .fx(row,space-around);
        .item{
            .wh(358px,74px);
            border:2px solid rgba(51,149,255,1);
            padding: 0 2%;
            padding-right:3%;
            border-radius:37px;
            .fx(row,space-between);
            .num{
                .wh(46px,46px);
                .bg(@bgCol);
                border-radius:50%;
                .fx();
                .sc(34px,#fff);
            }
            .itemContent{
                margin-left: -30%;
                .sc(18px,#000);
                .user{
                    .sc(16px,@bgCol);
                }
            }
            img{
                .wh(36px,40px);
            }
        }
        .itemUn{
            .wh(358px,74px);
            border:2px solid @unItem;
            padding: 0 2%;
            padding-right:3%;
            border-radius:37px;
            .fx(row,space-between);
            .num{
                .wh(46px,46px);
                .bg(@unItem);
                border-radius:50%;
                .fx();
                .sc(34px,#fff);
            }
            .itemContent{
                margin-left: -30%;
                .sc(18px,#9699A1);
                .user{
                    .sc(16px,@unItem);
                }
            }
            img{
                .wh(36px,40px);
            }
        }
    }
</style>
